<template>
	<div class="h-full bg-white">
		<a-card :bordered="false" :loading="onloading">
			<div class="flex gap-4">
				<!-- <a-image :width="80" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
				<a-avatar shape="square" :size="64">
					<template #icon><UserOutlined /></template>
				</a-avatar>
				<div class="text-left">
					<div class="my-[6px]">
						<span v-if="detailInfo.signMethod === '0'" class="relative top-[2px] mr-[12px]">{{
							detailInfo.templateName || '-'
						}}</span>
						<a-tag color="#108ee9" class="h-[24px]">{{ statusEnum[detailInfo.contractStatus] || '-' }}</a-tag>
					</div>
					<div>{{ detailInfo.code || '-' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] mt-6 pl-2">签约方信息</div>
			<div class="flex text-left pt-4">
				<div class="flex-1">
					<div class="text-gray-500">甲方抬头</div>
					<div>{{ detailInfo.firstParty || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">甲方联系人/法人</div>
					<div>{{ detailInfo.firstPartyPerson || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">甲方联系电话</div>
					<div>{{ detailInfo.firstPartyMobile || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">甲方地址</div>
					<div>{{ detailInfo.firstPartyAddress || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left pt-4 pb-6">
				<div class="flex-1">
					<div class="text-gray-500">乙方抬头</div>
					<div>{{ detailInfo.secondPartyName || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">乙方联系人</div>
					<div>{{ detailInfo.secondPartyPerson || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">乙方联系电话</div>
					<div>{{ detailInfo.secondPartyMobile || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">乙方送达地址</div>
					<div>{{ detailInfo.secondPartyAddress || '-' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">订单信息</div>
			<a-table
				:columns="partTransStatus ? transColumns : columns"
				:data-source="detailInfo.list"
				:scroll="{ x: 1500 }"
				:pagination="false"
				size="small"
				class="mt-[20px]"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'businessType'">
						{{ $TOOL.dictTypeData('BUSINESS_TYPE', record.businessType) }}
					</template>
					<template v-if="column.dataIndex === 'depositAmount'">
						{{ record.paymentMethod === 'FULL' ? '-' : record.depositAmount ?? '-' }}
					</template>
					<template v-if="column.dataIndex === 'balancePayment'">
						{{ record.paymentMethod === 'FULL' ? '-' : record.balancePayment ?? '-' }}
					</template>
				</template>
			</a-table>
			<div class="flex text-left py-5">
				<div class="flex-1">
					<div class="text-gray-500">付款类型</div>
					<div>{{ $TOOL.dictTypeData('PAYMENT_METHOD', detailInfo.paymentMethod) }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">合同总金额</div>
					<div>{{ detailInfo.contractAmount ?? '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">定金总金额</div>
					<div>{{ detailInfo.paymentMethod === 'FULL' ? '-' : detailInfo.depositAmount ?? '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">尾款总金额</div>
					<div>{{ detailInfo.paymentMethod === 'FULL' ? '-' : detailInfo.balancePayment ?? '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">尾款结清日期</div>
					<div>{{ detailInfo.paymentMethod === 'FULL' ? '-' : detailInfo.balancePaymentTime ?? '-' }}</div>
				</div>
			</div>
			<div v-if="transStatus" class="flex text-left py-5">
				<div class="flex-1">
					<div class="text-gray-500">合同转换抵扣金额</div>
					<div>{{ detailInfo.transDeductionAmount ?? '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">实际支付金额</div>
					<div>{{ detailInfo.orderAmount ?? '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">合同剩余金额</div>
					<div>{{ detailInfo.reduceContractAmount ?? '-' }}</div>
				</div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">其他信息</div>
			<div class="flex text-left py-5">
				<div class="flex-1">
					<div class="text-gray-500">签约方式</div>
					<div class="flex items-center">
						<span>{{ signMethodEnum[detailInfo.signMethod] || '-' }}</span>
						<el-icon
							v-if="detailInfo.signMethod === '0'"
							class="ml-1 cursor-pointer"
							color="rgb(16, 142, 233)"
							@click="onCopyContractUrl"
						>
							<el-icon-CopyDocument />
						</el-icon>
					</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约场景</div>
					<div>{{ signPayEnum[detailInfo.signPayment] || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约人</div>
					<div>{{ detailInfo.secondPartyPerson || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">创建人</div>
					<div>{{ detailInfo.createUserName || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">创建时间</div>
					<div>{{ detailInfo.createAt || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">签约日期</div>
					<div>{{ detailInfo.signingDate || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left py-5">
				<div class="flex-1">
					<div class="text-gray-500">合同备注</div>
					<div>{{ detailInfo.remark || '无' }}</div>
				</div>
			</div>
			<div class="flex text-left py-5">
				<div class="flex-1">
					<div class="text-gray-500">合同照片</div>
					<div
						v-if="detailInfo.contractImg"
						class="text-blue-500 cursor-pointer"
						@click="onPreview({ title: '查看合同照片', imgUrl: detailInfo.contractImg })"
					>
						查看
					</div>
					<div v-else>-</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">付款凭证</div>
					<div
						v-if="detailInfo.voucherImg"
						class="text-blue-500 cursor-pointer"
						@click="onPreview({ title: '查看付款凭证', imgUrl: detailInfo.voucherImg })"
					>
						查看
					</div>
					<div v-else>-</div>
				</div>
				<div class="flex-1"></div>
				<div class="flex-1"></div>
				<div class="flex-1"></div>
				<div class="flex-1"></div>
			</div>

			<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">审批信息</div>
			<div class="flex text-left py-6">
				<div class="flex-1">
					<div class="text-gray-500">业务审批状态</div>
					<div>{{ approvalStatusEnum[detailInfo.approvalStatus] || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">业务审批时间</div>
					<div>{{ detailInfo.approvalTime || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">业务审批备注</div>
					<div>{{ detailInfo.approvalRemark || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">财务审批状态</div>
					<div>{{ approvalStatusEnum[detailInfo.financeApprovalStatus] || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">财务审批时间</div>
					<div>{{ detailInfo.financeApprovalTime || '-' }}</div>
				</div>
				<div class="flex-1">
					<div class="text-gray-500">财务审批备注</div>
					<div>{{ detailInfo.financeRemark || '-' }}</div>
				</div>
			</div>
			<div class="flex text-left py-6">
				<div class="flex-1">
					<div class="text-gray-500">驳回原因</div>
					<div>{{ detailInfo.rejectReason || detailInfo.approvalRejectReason || '-' }}</div>
				</div>
			</div>

			<template v-if="detailInfo.payList && detailInfo.payList.length > 0">
				<div style="font-size: 16px" class="border-0 border-l-4 border-solid border-[#108ee9] pl-2">财务收款信息</div>
				<div v-for="(item, index) in detailInfo.payList" :key="index" class="flex text-left py-6">
					<div class="flex-1">
						<div class="text-gray-500">收款方式</div>
						<div>{{ item.companyAccountName || '-' }}</div>
					</div>
					<div class="flex-1">
						<div class="text-gray-500">收款时间</div>
						<div>{{ item.payTime.substr(0, 10) || '-' }}</div>
					</div>
					<div class="flex-1">
						<div class="text-gray-500">到账金额</div>
						<div>{{ item.receivedAmount + '' || '-' }}</div>
					</div>
					<div class="flex-1">
						<div class="text-gray-500">手续费</div>
						<div>{{ item.commission + '' || '-' }}</div>
					</div>
				</div>
			</template>
		</a-card>
	</div>

	<!-- 查看付款凭证 -->
	<image-preview ref="imagePreviewRef" />
</template>
<script setup>
	import contractApi from '@/api/biz/bizContractApi'
	import { signPayEnum, statusEnum, approvalStatusEnum, signMethodEnum } from './enum/contractEnum'
	import { useRoute } from 'vue-router'
	import ImagePreview from '@/components/drawer/imagePreview.vue'
	import tool from '@/utils/tool'
	import { ElMessage } from 'element-plus'

	const route = useRoute()

	const transStatus = computed(() => detailInfo.value.contractType === 'TRANS')
	const partTransStatus = computed(() => detailInfo.value.isTotal === '1')

	onBeforeMount(() => {
		getDetail(route.params.id)
	})

	const columns = [
		{
			title: '订单编号',
			dataIndex: 'orderNo',
			width: 160,
			fixed: 'left',
			customRender: ({ text }) => text || '-'
		},
		{
			title: '业务类型',
			dataIndex: 'businessType',
			width: 80,
			ellipsis: true
		},
		{
			title: '服务类目',
			dataIndex: 'serviceProjectName',
			width: 280,
			ellipsis: true,
			customRender: ({ text, record }) => `${record.serviceClassName} > ${record.serviceTypeName} > ${text}`
		},
		{
			title: '订单金额',
			dataIndex: 'orderAmount',
			width: 80,
			ellipsis: true
		},
		{
			title: '定金金额',
			dataIndex: 'depositAmount',
			width: 80,
			ellipsis: true
		},
		{
			title: '尾款金额',
			dataIndex: 'balancePayment',
			width: 80,
			ellipsis: true
		},
		{
			title: '服务时长',
			dataIndex: 'serviceLife',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '赠送时长',
			dataIndex: 'giveMonth',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '开始服务月',
			dataIndex: 'serviceStime',
			width: 80,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '结束服务月',
			dataIndex: 'serviceEtime',
			width: 80,
			customRender: ({ text }) => text || '-'
		}
	]
	const transColumns = [
		...columns,
		{
			title: '订单转换时间',
			dataIndex: 'transTime',
			width: 160,
			customRender: ({ text }) => text || '-'
		},
		{
			title: '备注',
			dataIndex: 'orderStatus',
			width: 80,
			customRender: ({ text }) => (text === 'CONVERTED' ? '已转换' : '-')
		}
	]

	/**
	 * ====================
	 *       基本逻辑
	 * ====================
	 */
	const detailInfo = ref({
		list: []
	})
	const onloading = ref(false)
	const getDetail = (id) => {
		onloading.value = true
		contractApi
			.getContractDetail({ id })
			.then((res) => {
				detailInfo.value = res
				onloading.value = false
			})
			.finally(() => {
				onloading.value = false
			})
	}

	/**
	 * 查看凭证
	 */
	const imagePreviewRef = ref(null)
	const onPreview = ({ title, tip, imgUrl }) => {
		imgUrl &&
			imagePreviewRef.value.open({
				title,
				tip,
				list: imgUrl.split(',')
			})
	}

	/**
	 * 复制电子合同链接
	 */
	const onCopyContractUrl = () => {
		contractApi.getElectronContractUrl({ id: detailInfo.value.id }).then((res) => {
			if (res) {
				tool.copyText(res).then(() =>
					ElMessage({
						message: '复制成功',
						type: 'success'
					})
				)
			} else {
				ElMessage({
					message: '暂无链接',
					type: 'warning'
				})
			}
		})
	}
</script>
<style lang="less" scoped>
	.table_border :deep(th) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(td) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(table) {
		border-color: #6e6e6e !important;
	}
	.table_border :deep(td:first-child) {
		border-left: 1px solid #6e6e6e !important;
	}
	.table_border :deep(th:first-child) {
		border-left: 1px solid #6e6e6e !important;
	}
</style>
